<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>工作台</title> 

<link href="${ctx }/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx }/custom/uimaker/easyui.css">
<link rel="stylesheet" href="${ctx }/css/workbench.css">
</head> 
<body>
    <div class="container">
        <div id="hd">
            
        </div>

        <div id="bd">
            <div class="bd-content">
                <div class="right-zone">
                    <div class="inform item-box">
                        <div class="inform-hd">
                            <label>通知公告</label>
                            <a href="#" onclick="javascript:parent.addTabs('通知公告','${ctx}/message/index?type=1');">更多<span>&gt;</span></a>
                        </div>
                        <ul>
                        	<c:forEach items="${ms }" var="m" begin="0" end="5">
	                            <li>
	                                <span></span>
	                                <a href="#" onclick="checkMessage(${m.id})" class="ellipsis">${m.title }
		                                <c:if test="${m.code eq '0' }">
		                                <i></i>
		                                </c:if>
	                                </a>
	                                <label><fmt:formatDate value="${m.createDate }" pattern="MM-dd"/></label>
	                            </li>
                            </c:forEach>
                        </ul>
                    </div>
                    <div class="price item-box">
                        <div class="inform-hd">
                            <label>测试窗口</label>
                            <a href="javascript:;">更多<span>&gt;</span></a>
                        </div>
                        <ul>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">界面设计后台界面UI作品</a>
                                <label>04-13</label>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">换肤设置-材料在线下单选购</a>
                                <label>04-12</label>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">2016最新软件界面设计欣赏</a>
                                <label>04-11</label>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">作者咨询QQ：32534386</a>
                                <label>04-10</label>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">数据库备份/还原设置修复</a>
                                <label>04-09</label>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">自定义文档属性基本参数设置</a>
                                <label>04-08</label>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">配货方式选择会员产品分类</a>
                                <label>04-07</label>
                            </li>
                        </ul>
                    </div>
                    <div class="attached item-box">
                        <div class="inform-hd">
                            <label>常用附件下载</label>
                            <a href="javascript:;">更多<span>&gt;</span></a>
                        </div>
                        <div class="attached-tab">
                            <a href="javascript:;" class="current item-left" attached="public-attached">公开附件</a>
                            <a href="javascript:;" class="item-right" attached="inner-attached">内部附件</a>
                        </div>
                        <ul class="public-attached">
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">界面设计作品PSD源文件免费下载</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">uimaker版权所有禁止转载发布</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">意见建议反馈内容模版</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">系统错误修复文档下载分布</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">采集信息管理系统后台界面</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">用户管理信息文件同步</a>
                            </li>
                        </ul>
                        <ul class="inner-attached hide">
                           <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">意见建议反馈内容模版</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">这里显示的不同内容</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">界面设计作品PSD源文件免费下载</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">系统错误修复文档下载分布</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">采集信息管理系统后台界面</a>
                            </li>
                            <li>
                                <span></span>
                                <a href="javascript:;" class="ellipsis">用户管理信息文件同步</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="center-part">
                    <div class="center-items todo">
                       <!--  <div class="calendar-part">
                             <div class="easyui-calendar" style="width:205px;height:231px;"></div>
                        </div> -->
                        <ul class="work-items clearfix">
                            <li>
                                <div class="work-inner">
                                    <div class="work-item green">
                                        <i class="iconfont">&#xe61f;</i>
                                        <span class="num">14&nbsp;<span class="unit">个</span></span>
                                        <label>待办未处理</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item red">
                                         <i class="iconfont">&#xe622;</i>
                                        <span class="num">6&nbsp;<span class="unit">条</span></span>
                                        <label>预警信息未读</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item yellow">
                                         <i class="iconfont">&#xe61d;</i>
                                        <span class="num">9&nbsp;<span class="unit">封</span></span>
                                        <label>邮件未读</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item blue">
                                         <i class="iconfont">&#xe621;</i>
                                        <span title="2000,00万" class="num">2000,00&nbsp;<span class="unit">万</span></span>
                                        <label>测试窗口</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item purple">
                                         <i class="iconfont">&#xe61e;</i>
                                        <span title="2000,00万" class="num">100,00&nbsp;<span class="unit">万</span></span>
                                        <label>测试窗口</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item gray">
                                         <i class="iconfont">&#xe620;</i>
                                        <span class="num">10&nbsp;<span class="unit">个</span></span>
                                        <label>测试窗口</label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="center-items chart0 clearfix">
                        <div class="chart0-item">
                            <div class="item-inner">
                                <div class="item-content">
                                    <div class="content-hd">测试窗口</div>
                                    <div class="chart-chart" id="chart0"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart0-item">
                            <div class="item-inner">
                                <div class="item-content">
                                    <div class="content-hd">测试窗口</div>
                                    <div class="chart-chart" id="chart1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center-items chart1">
                        <div class="chart1-inner">
                             <div class="item-hd">测试窗口</div>
                             <div class="chart1-chart" id="chart3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="ft"></div>
    </div>
    <div class="todo-panel">
         <div class="todo-title">
            <i class="iconfont">&#xe61f;</i>
            <span class="num">14&nbsp;<span class="unit">个</span></span>
            <label>待办未处理</label>
        </div>
        <div class="todo-items">
            <ul>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>申请未处理<i></i></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>10条</span>申请未处理<i></i></a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>0条</span>申请未处理，请及时审批<i></i></a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>1条</span>申请未处理，请及时审批</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>4条</span>申请未处理，请及时审批</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>6条</span>申请未处理，请及时审批，未处理会导致失效</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，请及时审批，未处理会导致失效</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，请及时审批，未处理会导致失效</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，请及时审批，未处理</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，请及时审批，未处理会导致失效</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，未处理会导致失效</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>开发申请未处理，请及时审批，未处理会导致失效</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，请及时审批，未处理会导致失效</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，请及时审批，会导致失效</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，请及时审批，未处理</a></a>
                    <label>04-13</label>
                </li>
                <li>
                    <span></span>
                    <a href="javascript:;" class="ellipsis">您有<span>2条</span>系统管理申请未处理，请及时审批</a></a>
                    <label>04-13</label>
                </li>
            </ul>
        </div>
        
    </div>
    <div id="d1"></div>	
    <script type="text/javascript" src="${ctx }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx }/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx }/js/echarts-all.js"></script>
    
  

    
    <script type="text/javascript">
    //chart0

    $(document).ready(function(){
    	$.ajax({
    		type:'post',
    		url:'${ctx}/chart/dount',
    		dataType:'json',
    		success:function(option0){
    		   option0 = $.parseJSON(option0);
    		   var myChart0 = echarts.init(document.getElementById('chart0'));
    		   myChart0.setOption(option0);
    		}
    	});
       

      //chart1
    	$.ajax({
    		type:'post',
    		url:'${ctx}/chart/exis',
    		dataType:'json',
    		success:function(option1){
    		    option1 = $.parseJSON(option1);
		        var myChart1 = echarts.init(document.getElementById('chart1'));
		        myChart1.setOption(option1);
    		}
    	});
      
      
      //chart3
    	$.ajax({
    		type:'post',
    		url:'${ctx}/chart/axis',
    		dataType:'json',
    		success:function(option3){
    		    option3 = $.parseJSON(option3);
    	        var myChart3 = echarts.init(document.getElementById('chart3'));
    	        myChart3.setOption(option3); 
    		}
    	});
         
          
        //我的待办点击事件
        $(document).on('click','.work-item.green',function(event){
            var width = (2 * $(this).width()) + 10;
            $(".todo-panel").width(width -2).css({top:$(this).offset().top,left:$(this).offset().left}).show();
            event.stopPropagation();
        });  
        $(".todo-panel").click(function(){
             event.stopPropagation();
        });    
        $(document).click(function(){
            $(".todo-panel").hide();
        });      

    });
        
    //公开附件tab事件处理
    $(".attached-tab").on("click","a",function(){
        $(this).closest(".attached-tab").find("a").removeClass("current");
        $(this).addClass("current");
        $(this).closest(".attached").find("ul").addClass("hide");   
        $(this).closest(".attached").find("ul." + $(this).attr("attached")).removeClass("hide");    
    })
    
    
    function checkMessage(id){
    	$('#d1').dialog({
    		title:'查看通知详情',
    		fit:true,
    		modal:true,
    		href:'${ctx}/message/check/'+id
    	});
    }
    
    </script>
</body> 
</html>
